<template>
  <div>
    <el-form size="mini">
      <div style="font-size:14px;display:flex;align-items:center;margin-bottom:16px; color:#666;">
        <img style="border-radius:50%;" height="35" width="35" :src="vote.user.avatar" alt="">
        <span style="padding-left:8px">{{ vote.user.nickName }}</span>
        <span style="padding-left:8px;">发起于</span>
        <span style="padding-left:8px;">{{ vote.createTime }}</span>
        <el-tag v-if="vote.state===0" size="mini" style="margin-left:8px;" type="success">进行中</el-tag>
        <el-tag v-if="vote.state===1" size="mini" style="margin-left:8px;" type="danger">已结束</el-tag>
      </div>
      <el-form-item label="投票标题">
        <span> {{ vote.title }}</span>
      </el-form-item>
      <el-form-item label="类型">
        <span> {{ vote.type.name }}</span>
      </el-form-item>
      <el-form-item label="投票描述">
        <span> {{ vote.desc }}</span>
      </el-form-item>
      <div>
        <el-link type="primary" @click="joinBtn(vote)"> 参与投票 </el-link>
        <el-link v-if="vote.state === 1 && vote.resultType === '结果可见'" style="margin-left:16px;" type="danger" @click="resultBtn(vote)"> 查看结果 </el-link>
      </div>
    </el-form>

    <!-- 参与投票模态框 -->
    <el-dialog
      :title="`参与投票   ${vote.title}`"
      :visible.sync="joinVisible"
      width="50%"
    >
      <el-form label-width="80px">

        <el-form-item label="投票标题">
          <span> {{ vote.title }}</span>
        </el-form-item>
        <el-form-item label="投票描述">
          <span> {{ vote.desc }}</span>
        </el-form-item>

        <el-form-item>
          <el-radio-group v-model="selectedItem">
            <div>
              <el-radio v-for="item in vote.itemList" :key="item.id" size="medium" class="item-choose" :label="item">{{ item.content }}</el-radio>
            </div>
          </el-radio-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="mini" plain style="margin-right:20px;" @click="confirmVote">投票</el-button>
          <el-button plain size="mini" @click="joinVisible=false;selectedItem={}">关闭</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>

    <!-- 结果查看模态框 -->
    <el-dialog
      :title="`查看结果   ${vote.title}`"
      :visible.sync="resultVisible"
      width="50%"
    >
      <h4>参数总人数： 1人</h4>
      <el-table :data="vote.itemList">
        <el-table-column
          label="序号"
          align="center"
          fixed=""
          width="80"
        >
          <template slot-scope="props">
            <span>{{ props.row.no }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="选项内容"
          align="center"
        >
          <template slot-scope="props">

            <span>{{ props.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="选择人数"
          align="center"
        >
          <template slot-scope="props">

            <el-progress :text-inside="true" :stroke-width="16" :percentage="getPercent(vote.itemList, props.row.count)" />
            <span>{{ props.row.count }}人</span>

          </template>
        </el-table-column>
      </el-table>

    </el-dialog></div>
</template>

<script>
import { getUser } from '@/utils/auth'

import * as userSelectApi from '@/api/userSelect'
import * as voteItemApi from '@/api/voteItem'
export default {
  name: '',
  props: {
    vote: {
      type: Object,
      default: () => {
        return { user: {}}
      }
    }

  },
  data() {
    return {
    //   current: {},
      joinVisible: false,
      selectedItem: {},
      resultVisible: false
    }
  },
  created() {
  },
  methods: {
    joinBtn(vote) {
      // 判断是否结束了
      if (vote.state === 1) {
        this.$message.warning('投票已结束')
        return
      }
      // 判断有没有登录
      if (!getUser()) {
        this.$message.error('请先登录')
        return
      }

      this.current = vote
      this.joinVisible = true
    },
    confirmVote() {
      const data = {
        selectedItemId: this.selectedItem.id,
        voteId: this.current.id,
        userId: getUser().id
      }
      userSelectApi.add(data).then(res => {
        // 更新投票数
        this.selectedItem.count = this.selectedItem.count + 1
        voteItemApi.update(this.selectedItem)

        this.$message.success('投票成功')
        this.joinVisible = false
        this.selectedItem = {}
      })
    },
    resultBtn(vote) {
      this.resultVisible = true
    },
    getPercent(list, count) {
      const sum = list.reduce((pre, next) => {
        console.log(pre, next.count)
        return pre + next.count
      }, 0)
      const p = count / sum * 100
      console.log(sum)
      return parseFloat(p.toFixed(2))
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
